<template>
    <section class="mainSection">
        <layout :isVertical="true" style="overflow-y: auto;padding-bottom:10px;">
            <layout layout="top" height="250px'">
                <layout style="padding:5px;">
                    <layout layout="center" class="shadowPanel noScrollSection">
                        <div style="width:100%;text-align: left;padding-left:20px;font-weight: bold;height:40px;line-height:40px;vertical-align: baseline;padding-top: 10px;">
                            <img  class="cinemaImg" src="../../imgs/cinema.png" />
                            <span style="margin-left:5px;line-height: 10px;vertical-align: bottom;height: 30px;display: inline-block;">{{findByPropertyCodeList.cinemaNameCn}}</span>
                        </div>
                        <div style="color:#666;font-size: 13px;padding: 10px 30px;line-height: 30px;">
                            <!-- {{from}} -->
                            <el-row>
                                <el-col :span="2" style="text-align:left;color:#666;font-weight:bold;">
                                    专资编码:
                                </el-col>
                                <el-col :span="3">
                                    {{findByPropertyCodeList.cinemaCode}}
                                </el-col>
                                <el-col :span="2" style="text-align:left;color:#666;font-weight:bold;padding-right:20px;">
                                    联系人:
                                </el-col>
                                <el-col :span="3">
                                    {{findByPropertyCodeList.contactNameOne}}
                                </el-col>
                                <el-col :span="2" style="text-align:left;color:#666;font-weight:bold;">
                                    TMS状态:
                                </el-col>
                                <el-col :span="3">
                                    <span v-if="findByPropertyCodeList.onLine">在线</span>
                                    <span v-else>离线</span>
                                </el-col>
                                <el-col :span="2" style="text-align:center;color:#666;font-weight:bold;padding-right:20px;">
                                    院线:
                                </el-col>
                                <el-col :span="7">
                                     {{findByPropertyCodeList.chain}}
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="2" style="text-align:left;color:#666;font-weight:bold;">
                                    厅数:
                                </el-col>
                                <el-col :span="3">
                                     {{findByPropertyCodeList.hallNum}}
                                </el-col>
                                <el-col :span="2" style="text-align:left;color:#666;font-weight:bold;">
                                    联系电话:
                                </el-col>
                                <el-col :span="3">
                                    {{findByPropertyCodeList.phoneOne}}
                                </el-col>
                                <el-col :span="2" style="text-align:left;color:#666;font-weight:bold;padding-right:20px;">
                                    TMS-IP:
                                </el-col>
                                <el-col :span="3">
                                    {{findByPropertyCodeList.manageIp}}
                                </el-col>
                                <el-col :span="2" style="text-align:center;color:#666;font-weight:bold;padding-right:20px;">
                                    地址:
                                </el-col>
                                <el-col :span="7">
                                    {{findByPropertyCodeList.address}}
                                </el-col>
                            </el-row>
                        </div>
                    </layout>
                </layout>
            </layout>
            <layout layout="top" height="250px'">
                <layout style="padding:5px;">
                    <layout layout="center" class="shadowPanel noScrollSection">
                        <div style="width:100%;text-align: left;padding-left:20px;font-weight: bold;height:50px;line-height:50px;vertical-align: baseline">
                            <img  class="cinemaImg" src="../../imgs/listIconsc.png" style="margin-top: 10px;"/>
                            <span style="margin-left:5px;line-height: 0px;vertical-align: bottom;height: 30px;display: inline-block;">请选择日期-影厅查看排期情况</span>
                        </div>
                        <div style="border-bottom:3px dotted rgb(102, 102, 102);text-align: center;margin:0 30px;">
                            <div style="display:inline-block;margin:20px;border:3px solid #98C987;border-radius: 10px;width: 10%;height:80px;"
                                 :style="{background:selectDate.DD==row.DD?'#98C987':'#F7F7F7','border-color':row.isError > 0?'#FF9800':'#98C987','color':selectDate.DD==row.DD?'#FFFFFF':'#666666'}"
                                 @click="selectedDay(row)"
                                 v-for="row in dateList" :key="row.d">
                                <div style="text-align: center;height:40px;line-height:40px;vertical-align: middle;color:#666;font-weight:bold;">
                                    {{row.d}}
                                </div>
                                <div style="text-align: center;height:40px;line-height:16px;vertical-align: middle;font-weight:bold;">
                                    {{row.DD}}
                                </div>
                            </div>
                        </div>
                        <div style="position: relative;" v-if="hallList.length>0">
                            <button type="button" class="el-carousel__arrow el-carousel__arrow--left" @click="moveCarousel(-1)" :disabled="currentOffset==0?true:false" >
                                <i class="el-icon-arrow-left"></i>
                            </button>
                            <button type="button" class="el-carousel__arrow el-carousel__arrow--right" @click="moveCarousel(1)" :disabled="currentOffset <=paginationFactor * -1 * (hallList.length -windowSize)?true:false">
                                <i class="el-icon-arrow-right"></i>
                            </button>
                            <div  style="display: inline-block; white-space: nowrap;width: 100%;margin-left:30px;margin-right:40px;"  :style="{transform: 'translateX' + '(' + currentOffset + 'px' + ')',}">
                                <!-- {{hallList}} -->
                                <div style=" display:inline-block;margin:20px;border:3px solid #98C987;border-radius: 10px;width: 10%;height:80px;"
                                     :style="{background:(selectHall!=undefined?selectHall.hallName==row.hallName:'#F7F7F7')?'#98C987':'#F7F7F7','border-color':row.failedCount>0?'#FF9800':'#98C987','color':(selectHall!=undefined?selectHall.hallName==row.hallName:'#F7F7F7')?'#FFFFFF':'#666666'}"
                                     v-for="(row,index) in hallList" :key="row.hallName" @click="selectedHall(row,index)">
                                        <el-tooltip class="item" effect="dark" :content="row.hallName" placement="top-start">
                                        <div style="text-align: center;height:80px;line-height:75px;vertical-align: middle;font-weight:bold;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                                            {{row.hallName}}
                                        </div>
                                        </el-tooltip>
                                        
                                        <!-- <div style="text-align: center;height:40px;line-height:75px;vertical-align: middle;font-weight:bold;">
                                            {{row.posHallName}}
                                        </div> -->
                                </div>
                                
                            </div>
                        </div>
                    </layout>
                </layout>
            </layout>
            <layout layout="top" height="250px'">
                <layout style="padding:5px;">
                    <layout layout="center" class="shadowPanel noScrollSection">
                        <div style="width:100%;text-align: left;padding-left:20px;font-weight: bold;height:50px;line-height:50px;vertical-align: baseline">
                            <img class="cinemaImg" src="../../imgs/listIconsc.png" style="margin-top: 10px;"/>
                            <span style="margin-left:5px;line-height: 0px;vertical-align: bottom;height: 30px;display: inline-block;">
                                POS排期信息 - {{selectDate.YYYY}}{{selectDate.MM}}{{selectDate.DD}}<span v-if="selectHall!=undefined">-{{selectHall.hallName}}</span> </span>
                        </div>
                        
                        <div style="position: relative;min-height: 100px;"  v-if="movieList.length>0">
                           <button type="button" class="el-carousel__arrow el-carousel__arrow--left" @click="moveCarouselData(-1)" :disabled="currentOffsetScroll==0?true:false" >
                                <i class="el-icon-arrow-left"></i>
                            </button>
                            <button type="button" class="el-carousel__arrow el-carousel__arrow--right" @click="moveCarouselData(1)" :disabled="currentOffsetScroll <=paginationFactorScroll * -1 * (movieList.length -windowSize)?true:false">
                                <i class="el-icon-arrow-right"></i>
                            </button>
                            <div ref="posList" style="display: inline-block; white-space: nowrap;width: 100%;margin-left:30px;margin-right:40px;" :style="{transform: 'translateX' + '(' + currentOffsetScroll + 'px' + ')',}">
                                <div style=" display:inline-block;margin:20px;border:3px solid #98C987;border-radius: 10px;width: 14%;height:120px;font-size: 12px;"
                                     :style="{background:indexNum==index?'#98C987':'#F7F7F7','border-color':row.status=='failed'?'#FF9800':'#98C987','color':indexNum==index?'#FFFFFF':'#666666'}"
                                     @click="selectedMovie(row,index)"
                                     v-for="(row,index) in movieList" :key="index">
                                    <p style="white-space: normal;
                                    height: 50px;
                                    vertical-align: baseline;
                                    line-height: 50px;
                                    text-align: center;
                                    font-weight: bold;
                                    color: #111111; overflow:hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow:ellipsis;">
                                        <el-tooltip class="item" effect="dark" :content="row.filmName" placement="top">
                                            <span class="button_tip">{{row.filmName}}</span>
                                        </el-tooltip>
                                    </p>
                                    <div style="text-align: center;height:30px;line-height:30px;vertical-align: middle;font-weight:bold;">
                                        {{row.scheduleDuration}}
                                    </div>
                                    <div style="text-align: center;height:30px;line-height:30px;vertical-align: middle;font-weight:bold;">
                                        <span>{{row.scheduleBeginTime}}~{{row.scheduleEndTime}}</span>
                                    </div>
                                </div>
                    
                            </div>
                        </div>
                        <p v-else style="    padding: 24px;font-size: 16px;">当前影厅没有pos排期</p>
                    </layout>
                </layout>
            </layout>
            <layout layout="top" height="350px'">
                <layout style="padding:5px;">
                    <layout layout="center" class="shadowPanel noScrollSection">
                        <layout :isVertical="true" style="padding:0px 20px 10px 20px;">
                            <common-toolbar text="核验详情">
                            </common-toolbar>
                            <layout layout="center" class="centerSection noScrollSection">
                                <el-table
                                        :data="data"
                                        :stripe="true"
                                        ref="mutipleTable"
                                        :highlight-current-row="true"
                                        border
                                        :tree-props="{children: 'children'}"
                                        row-key="id"
                                        header-row-class-name="tableHeader"
                                        tooltip-effect="dark"
                                        class="watchTable"
                                        style="width: 100%;min-height: 300px;">
                                    <el-table-column
                                            label="No."
                                            type="index"
                                            :index="indexMethod"
                                            width="50">
                                    </el-table-column>
                                    <el-table-column
                                            property="title"
                                            label="自动核验项"
                                            width="200"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            property="result"
                                            label="核验结果"
                                            width="400">
                                            <template slot-scope="scope" >
                                                <span :style="{'color':1 == getDeviceConnStatus(scope.row.result)?'#FF9800':''}">{{scope.row.result}}</span>
                                            </template>
                                    </el-table-column>
                                    <el-table-column
                                            property="content"
                                            label="核验项详情"
                                            show-overflow-tooltip="true"
                                            >
                                             <template slot-scope="scope" >
                                                <span :style="{'color':1 == getDeviceConnStatus(scope.row.result)?'#FF9800':''}">{{scope.row.content}}</span>
                                            </template>
                                    </el-table-column>
                                </el-table>
                                <!--<div class="paginationDiv">
                                    <el-pagination
                                            background
                                            layout="prev, pager, next"
                                            @current-change="handleCurrentChange"
                                            :page-size="pageSize"
                                            :total="total">
                                    </el-pagination>
                                </div>-->
                    
                            </layout>
                        </layout>
                    </layout>
                </layout>
            </layout>
        </layout>
    </section>
</template>

<script lang="ts">
	import Vue from 'vue';
    import Component from 'vue-class-component';
    import ServiceContent from './schedulesWatchDetail.service';
    import Service from './cinemaWatchDetail.service';
    import {JSEncrypt} from 'jsencrypt';
    import base from '@/scrollLoad';
    import moment from 'moment';

    @Component
    export default class schedulesWatchDetail extends Vue{
        height = 500;
        windowHeight = 700;
        loading = false;
        data = [];
        onlyShowError = false;
        total = 0;
        page = 1;
        pageSize = 30;
        cinemaName = '';
        cinemaCode = '';
        disabledposScrollLeft = false;
        disabledposScrollRight=false;
        online = false;
        dateList = [];
        dateListAutoCheckFaultCount = [];

        selectDate = {};
        
        selectHall = {};
        hallList = [];
        timer=null
        movieList = [];
        selectMovie = {};
        indexNum=0
        findByPropertyCodeList = {};
        currentOffset = 0;
        currentOffsetScroll = 0;

        windowSize = 3;
        paginationFactor = 100;
        paginationFactorScroll= 120;
        listIndex= 0;
        atHeadOfList=0
        constructor(){
            super();
            
        };
         // 序号
    indexMethod(index) {
    return (this.page - 1) * this.pageSize + index + 1;
    }
        computed: {
            // atEndOfList() {
            //     //console.log(this.items.length);
            //     //console.log(
            //         this.paginationFactor * -1 * (this.items.length - this.windowSize)
            //     );
            //     return (
            //         this.currentOffset <= this.paginationFactor * -1 * (this.items.length - this.windowSize)
            //     );
            // }
            // atHeadOfList() {
            //     return this.currentOffset === 0;
            // }
        }
        moveCarousel(direction) {
            if (direction === 1) {
                if (this.listIndex < this.hallList.length - 1) {
                    this.currentOffset -= this.paginationFactor;
                        this.listIndex = this.listIndex + 1;
                    }
                    // debugger
                } else if (direction === -1) {
                    // debugger
                    this.currentOffset += this.paginationFactor;
                     this.listIndex = 0;
                }
                    //console.log(direction,this.paginationFactor,this.currentOffset,this.listIndex)
            }
        moveCarouselData(direction) {
            if (direction === 1) {
                if (this.listIndex < this.movieList.length - 1) {
                    this.currentOffsetScroll -= this.paginationFactorScroll;
                    this.listIndex = this.listIndex + 1;
                }
                // debugger
            } else if (direction === -1) {
                // debugger
                this.currentOffsetScroll += this.paginationFactorScroll;
            }
        }
        searchErrorList(){
            this.onlyShowError = true;
        }
        
        searchAllList(){
            this.onlyShowError = false;
        }

        handleSizeChange(val) {
            this.pageSize = val;
        }

        handleCurrentChange(val) {
            this.page = val;
        }

        showDetail(){
        
        }
        getDeviceConnStatus(row) {
            if(row == '异常') {
                return 1
            } else {
                return 0
            }
        }
        findByPropertyCode() {
            let data = JSON.parse(window.sessionStorage.getItem('schedulesWatchDetail'))
            let parames = data.cinemaCode;
            Service.findByPropertyCode(parames).then((res) =>{
                if(res.succeeded){
                    this.findByPropertyCodeList = res.data
                }else{
                    this['$message']({
                        message: res.data.errorMessage,
                        type: 'error'
                    });
                }
            });
        }
        getCheckResult(row) {
            let data = JSON.parse(window.sessionStorage.getItem('schedulesWatchDetail'))
            let parames  = {
                cinemaCode:data.cinemaCode,
                scheduleDate:row==undefined? moment().format('YYYY-MM-DD'):moment(row).format('YYYY-MM-DD')
            }
            ServiceContent.getCheckResult(parames).then(res=>{
                //console.log(res)
                if(res.succeeded){
                    let dataName = {
                        autoCheckFaultCount:res.data!=null?res.data.autoCheckFaultCount:0,
                        scheduleDate:row
                    }
                    this.dateListAutoCheckFaultCount.push(dataName)
                    if(res.data!=null) {

                        this.hallList = res.data.hallInfoList
                        this.selectedHall(res.data.hallInfoList[0])
                        this.selectedMovie(res.data.hallInfoList[0].scheduleInfoList[0])
                        this.data = res.data.hallInfoList[0].scheduleInfoList[0].autoCheckInfoList
                    } else {
                        this.hallList = []
                        this.movieList =[]
                        this.data=[]
                    }
                   
                }else{
                    this['$message']({
                        message: res.data.errorMessage,
                        type: 'error'
                    });
                }
            })
        }
        getCheckResultData() {
            let data = JSON.parse(window.sessionStorage.getItem('schedulesWatchDetail'))
            let parames  = {
                cinemaCode:data.cinemaCode,
                scheduleDate:moment().format('YYYY-MM-DD')
            }
            ServiceContent.getCheckResult(parames).then(res=>{
                //console.log(res)
                if(res.succeeded){
                    if(res.data!=null) {
                        this.hallList = res.data.hallInfoList;
                        this.selectedHall(res.data.hallInfoList[0])
                        this.selectedMovie(res.data.hallInfoList[0].scheduleInfoList[0])
                        this.data = res.data.hallInfoList[0].scheduleInfoList[0].autoCheckInfoList
                    } else {
                        this.hallList = []
                        this.movieList =[]
                    }
                   
                }else{
                    this['$message']({
                        message: res.data.errorMessage,
                        type: 'error'
                    });
                }
            })
        }
        dateFormat(date){
            return moment(date).format("YYYY-MM-DD,H:m:s");
        }

        resizeEvent(){
            this.windowHeight = document.documentElement.clientHeight;
            this.height = this.windowHeight - 210;
        }
        
        getDateList(){
            this.dateList = [];
            let list = [];
            let date = new Date();
            
            for(let i=-3;i<4;i++){
                // //console.log(moment(date).add(i,'days'))
                list.push(this.getNowDate(moment(date).add(i,'days')))
                if(i == 0){
                    this.selectDate = this.getNowDate(moment(date).add(i,'days'));
                }
            }

            for(let itemDate of list){
                // list[i]['isError'] = i>5;
                for(let item of this.dateListAutoCheckFaultCount) {
                    for(let itemDate of list) {
                        if(moment(item.scheduleDate).format('DD') ==itemDate.DD) {
                        //    return alert(123133)
                        //console.log(item.autoCheckFaultCount)
                            // list[i]['isError'] = item.autoCheckFaultCount;
                            this.$set(itemDate,'isError',item.autoCheckFaultCount)
                        }
                    }
                }
            }
            this.dateList = list;
            //console.log(this.dateList)
        }

        getNowDate(date) {
            let day = moment(date).format('d');
            let strDay = '';
            switch (day) {
                case '1':
                    strDay = '一';
                    break;
                case '2':
                    strDay = '二';
                    break;
                case '3':
                    strDay = '三';
                    break;
                case '4':
                    strDay = '四';
                    break;
                case '5':
                    strDay = '五';
                    break;
                case '6':
                    strDay = '六';
                    break;
                case '7':
                    strDay = '日';
                    break;
                case '0':
                strDay = '日';
                break;
            }
            //console.log(strDay, day);
            return {
                YYYY: moment(date).format('YYYY'),
                MM: moment(date).format('MM'),
                DD: moment(date).format('DD'),
                d: '星期' + strDay
            }
        }

        selectedDay(row){
            //console.log(row)
            this.selectDate = row;
            this.currentOffset = 0;
            this.currentOffsetScroll = 0;
            this.getCheckResult(row.YYYY+row.MM+row.DD)
        }

        selectedHall(row,index){
            //console.log(row)
            this.selectHall = row;
            // this.getMovieList(row);
            if(row.scheduleInfoList!=null) {
                this.movieList = row.scheduleInfoList;
                this.selectedMovie(row.scheduleInfoList[0],0)
            } else{
                this.movieList = 0
                this.data = []
            }
        }

        selectedMovie(row,index){
            //console.log(index)
            //console.log(row)
            this.data = []
            this.selectMovie = row;
            if(index==undefined) {
                return this.indexNum = 0
            } else {
                this.indexNum = index
                this.data = JSON.parse(JSON.stringify(row.autoCheckInfoList))
                return ;
            }
        }
        
        getMovieList(row) {
            this.movieList = [];
            for (let i = 0; i < 10; i++) {
                this.movieList.push({
                    id: i,
                    name: '贝肯熊:金牌特工(数字3D)' + (i % 2 == 0 ? ' xxxxxxxxxxxxx' : ''),
                    totalTime: '1小时44分8秒',
                    startTime: '10:00:00',
                    endTime: '12:00:00'
                })
            }
        }
        
        getHallList(){
            for(let i=0;i<10;i++){
                this.hallList.push({
                    id: i,
                    name: (i+1)+'号厅',
                    fullname: 'xxxx影厅'+i,
                    isError: i>7
                })
            }
           
        }

        posScrollLeft(e){
            // //console.log(this.$refs.posList.scrollLeft)
            if(this.$refs.posList.scrollLeft >= 248) {
                this.$refs.posList.scrollLeft -= 248;
            } else {
                this.$refs.posList.scrollLeft = 0;
                this.disabledposScrollLeft = true
            }
        }

        posScrollRight(e){
            if(this.$refs.posList.offsetWidth > this.$refs.posList.scrollLeft + 248) {
                this.$refs.posList.scrollLeft += 248;
                 this.disabledposScrollRight = true
            } else {
                this.$refs.posList.scrollLeft = this.$refs.posList.offsetWidth;
            }
        }
        
        created(){
            const me = this;
            let list = [];
            let date = new Date();
            for(let i=-3;i<4;i++){
                // //console.log(moment(date).add(i,'days'))
                // list.push(this.getNowDate(moment(date).add(i,'days')))
                // if(i == 0){
                //     this.selectDate = this.getNowDate(moment(date).add(i,'days'));
                // }
                this.getCheckResult(moment(date).add(i,'days'))
            }

            // this.getDateList();
            // this.getHallList();
            this.resizeEvent();
            this.findByPropertyCode()

            // this.searchList();
            window.onresize = () => {
                return (() => {
                    me.resizeEvent();
                    me.getDateList();
                })()
            };
            this.timer = setTimeout(() => {
                this.getDateList();
                this.getCheckResultData();
                }, 1000);
        };
        clearTimer() {
            if(this.timer) {
                clearInterval(this.timer);
                this.timer = null;
            }
        }
        beforeDestroy() {
            // debugger;
            this.clearTimer();
        }
        mounted(){   
                  
        };
        
    }
</script>
<style lang="scss" scoped>
    @import '../../styles/login.scss';
   .cinemaImg {
       width: 24PX;
       height: 24px;
   }
</style>